<template>
  <div class="list_pro">
  	<!--精品推荐-->
  	<div class="title_wrap">
  		<div class="title_child">
  			<div>
  				<i></i>
  				<i></i>
  				<b>精品推荐</b>
  				<span>New Arrivals</span>
  			</div>
  		</div>
  	</div>
	<!--导航-->
	<div class="tab_top">
		<ul>
			<li>
				<p>人气</p>
			</li>
			<li>
				<p>销量</p>
			</li>
			<li>
				<p>最新</p>
			</li>
			<li>
				<p>价格<img src="../../assets/images/price.png"></p>
			</li>
		</ul>
	</div>
  <div class="tab_top common" v-show="flag1">
    <ul>
      <li>
        <p>人气</p>
      </li>
      <li>
        <p>销量</p>
      </li>
      <li>
        <p>最新</p>
      </li>
      <li>
        <p>价格<img src="../../assets/images/price.png"></p>
      </li>
    </ul>
  </div>
	<!--产品列表-->
	<div class="pro">
		<ul>
			<li v-for="item in proData">
				<router-link :to="'/details/'+item.chuchuId">
	  				<img :src="item.imgUrl">
	  				<h2 v-text="item.title"></h2>
	  				<h3><span>￥</span>{{item.newPrice}}</h3>
	  				<p>
	  					<i>￥{{item.oldPrice}}</i>
	  					<span>{{item.saleCount}}人已购买</span>
	  				</p>
	  				<div></div>
	  			</router-link>
			</li>
		</ul>
	</div>
  </div>
</template>

<script>

  export default{
  	data () {
  		return {
  			proData:[],
        scroll:'',
        flag1:false
  		}
  	},
    methods: {
      show() {
        if (document.body.scrollTop > 900) {
            this.flag1 = true;
        } else {
            this.flag1 = false;
        }
        return this.flag1;
      }
    },
    mounted() {
      window.addEventListener('scroll', this.show)
    },
  	created () {
  		this.$http.get('../../static/list/list-boy.json').then(data => {
  			//console.log(data.data.data.productList);
  			this.proData = data.data.data.productList;
  		}, err => {
  			console.log(err);
  		});

      this.$http.get('../../static/list/list-boy2.json').then(data => {
        let result1 = data.data.data.productList;
        for(var i of result1){
          this.proData.push(i);
        }
      }, err => {
        console.log(err);
      });

      this.$http.get('../../static/list/list-boy3.json').then(data => {
        let result2 = data.data.data.productList;
        for(var k of result2){
          this.proData.push(k);
        }
      }, err => {
        console.log(err);
      });

  	},
  }

</script>

<style scoped>
.common{
  position: fixed!important;
  top: 0px;
  left: 0px;
}
/*精品推荐*/
.title_wrap{
  padding: 2.5rem 0.83rem;
  color: #999;
  background-color: #fff;
}
.title_wrap .title_child{
  height: 1px;
  background: #eaeaea;
  position: relative;
}
.title_wrap .title_child div{
  position: absolute;
  top: -0.83rem;
  left: 50%;
  margin-left: -5.83rem;
  width: 11.67rem;
  text-align: center;
  background: #FFF;
}
.title_wrap .title_child div i:first-of-type{
  margin-left: 0.25rem;
  float: left;
  width: 1.59rem;
  height: 0.42rem;
  margin-top: 0.67rem;
  display: inline-block;
  background: url('../../assets/images/icon.png');
  background-size: 100% 100%;
}
.title_wrap .title_child div i:last-of-type{
  margin-right: 0.25rem;
  float: right;
  width: 1.59rem;
  height: 0.42rem;
  margin-top: 0.67rem;
  display: inline-block;
  background: url('../../assets/images/icon.png');
  background-size: 100% 100%;
}
.title_wrap .title_child div b{
  color: #df3130;
  font-size: 1.34rem;
  display: block;
  line-height: 1.5rem;
}
.title_wrap .title_child div span{
  color: #ebebeb;
  font-size: 1.2rem;
  display: block;
  line-height: 1.5rem;
}
/*导航*/
.tab_top{
  position: relative;
  top: 0px;
  z-index: 7;
  width: 100%;
  height: 2.75rem;
  font-size: 1.2rem;
  background: #FFF;
}
.tab_top ul{
  width: 100%;
  height: 2.5rem;
  position: absolute;
  top: 0.25rem;
  left: 0;
  z-index: 6;
}
.tab_top ul li{
   width: 25%;
  text-align: center;
  color: #83797b;
  cursor: pointer;
  float: left;
}
.tab_top ul li p{
  display: inline-block;
  height: 2.5rem;
  line-height: 2.5rem;
}
.tab_top ul li p img{
  width: 0.5rem;
  height: 0.83rem;
  margin-left: 2px;
  vertical-align: middle;
  transform: rotateX(0deg);
}
.tab_top ul li:hover p{
  height: 2.33rem;
  line-height: 2.33rem;
  color: #df3130;
  border-bottom: solid 2px #df3130;
}
/*产品列表*/
.pro{
  width: 100%;
  margin-bottom: 4.17rem;
}
.pro ul{
  width: 100%;
}
.pro ul:after{
  clear: both;
    content: '';
    font-size: 0;
    display: block;
    visibility: hidden;
    height: 0;
}
.pro ul li{
  width: 50%;
  position: relative;
  border-bottom: solid 1px #EEE;
  padding: 10px 10px 4px;
  float: left;
  box-sizing: border-box;
  background-color: #fff;
}
.pro ul li div{
  position: absolute;
  top: 0;
  right: 0;
  width: 1px;
  height: 100%;
  background: #EEE;
}
.pro ul li img{
  width: 100%;
}
.pro ul li h2{
  padding:0 0.42rem;
  font-size: 1.2rem;
  color: #444;
  height: 3.33rem;
  line-height: 1.67rem;
  overflow: hidden;
  word-break: break-all;
}
.pro ul li h3{
  font-size: 1.6rem;
  color: #df3130;
  padding:0.5rem 0.42rem 0;
  font-weight: 400;
}
.pro ul li h3 span{
  font-size: 1.1rem;
  margin-top: 0.5rem;
  color: #df3130
}
.pro ul li p{
  padding:0 0.42rem 0.42rem;
  color: #aaa;
  font-size: 1.1rem;
}
.pro ul li p i{
  font-size: 1.05rem;
  text-decoration: line-through;
}
.pro ul li p span{
  float: right;
}
</style>
